<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <title>xiaozefeng'blog</title>
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css"/>
    <style>
        /*
   * Globals
   */

        body {
            font-family: Georgia, "Times New Roman", Times, serif;
            color: #555;
        }

        h1, .h1,
        h2, .h2,
        h3, .h3,
        h4, .h4,
        h5, .h5,
        h6, .h6 {
            margin-top: 0;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-weight: normal;
            color: #333;
        }


        /*
         * Override Bootstrap's default container.
         */

        @media (min-width: 1200px) {
            .container {
                width: 970px;
            }
        }


        /*
         * Masthead for nav
         */

        .blog-masthead {
            background-color: #428bca;
            -webkit-box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1);
            box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1);
        }

        /* Nav links */
        .blog-nav-item {
            position: relative;
            display: inline-block;
            padding: 10px;
            font-weight: 500;
            color: #cdddeb;
        }

        .blog-nav-item:hover,
        .blog-nav-item:focus {
            color: #fff;
            text-decoration: none;
        }

        /* Active state gets a caret at the bottom */
        .blog-nav .active {
            color: #fff;
        }

        .blog-nav .active:after {
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 0;
            margin-left: -5px;
            vertical-align: middle;
            content: " ";
            border-right: 5px solid transparent;
            border-bottom: 5px solid;
            border-left: 5px solid transparent;
        }


        /*
         * Blog name and description
         */

        .blog-header {
            padding-top: 20px;
            padding-bottom: 20px;
        }

        .blog-title {
            margin-top: 30px;
            margin-bottom: 0;
            font-size: 60px;
            font-weight: normal;
        }

        .blog-description {
            font-size: 20px;
            color: #999;
        }


        /*
         * Main column and sidebar layout
         */

        .blog-main {
            font-size: 18px;
            line-height: 1.5;
        }

        /* Sidebar modules for boxing content */
        .sidebar-module {
            padding: 15px;
            margin: 0 -15px 15px;
        }

        .sidebar-module-inset {
            padding: 15px;
            background-color: #f5f5f5;
            border-radius: 4px;
        }

        .sidebar-module-inset p:last-child,
        .sidebar-module-inset ul:last-child,
        .sidebar-module-inset ol:last-child {
            margin-bottom: 0;
        }


        /* Pagination */
        .pager {
            margin-bottom: 60px;
            text-align: left;
        }

        .pager > li > a {
            width: 140px;
            padding: 10px 20px;
            text-align: center;
            border-radius: 30px;
        }


        /*
         * Blog posts
         */

        .blog-post {
            margin-bottom: 60px;
        }

        .blog-post-title {
            margin-bottom: 5px;
            font-size: 40px;
        }

        .blog-post-meta {
            margin-bottom: 20px;
            color: #999;
        }


        /*
         * Footer
         */

        .blog-footer {
            padding: 40px 0;
            color: #999;
            text-align: center;
            background-color: #f9f9f9;
            border-top: 1px solid #e5e5e5;
        }

        .blog-footer p:last-child {
            margin-bottom: 0;
        }
    </style>
</head>
<body>
<div class="blog-masthead">
    <div class="container">
        <nav class="blog-nav">
            <a href="#" id="home" class="blog-nav-item active"> 主页</a>
            <a href="#" class="blog-nav-item"> 新特性</a>
            <a href="#" class="blog-nav-item"> 关于我</a>
        </nav>
    </div>
</div>
<div class="container">
    <div class="blog-header">
        <h1 class="blog-title">Xiaozefeng'blog</h1>
        <p class="lead blog-description">java 技术博客，通过bootstrap制作页面</p>
    </div>
    <div class="row" th:each="article : ${articles}">
        <div class="col-sm-8 blog-main">
            <div class="blog-post">
                <h2 th:text="${article.title}"></h2>
                <p class="blog-post-meta" th:text="${article.createdTime}"></p>
                <p th:text="${article.subTitle}"></p>
                <hr>
                <p th:text="${article.content}"></p>
            </div>
        </div>
        <hr>
    </div>
    <!--<div class="row">-->
        <!--<div class="col-sm-8 blog-main">-->
            <!--<div class="blog-post">-->
                <!--<h2 class="blog-post-title"> 博客标题</h2>-->
                <!--<p class="blog-post-meta">时间</p>-->
                <!--<p>副标题</p>-->
                <!--<hr>-->
                <!--<p>文章内容</p>-->
                <!--<blockquote>-->
                    <!--<p>再来一段内容</p>-->
                <!--</blockquote>-->
                <!--<h2>小标题</h2>-->
                <!--<h3>sub heading</h3>-->
                <!--<pre>-->
    <!--<code>-->
    <!--@Getter-->
    <!--public enum ResultEnum {-->

    <!--/**-->
    <!--* 枚举-->
    <!--*-->
    <!--*/-->
    <!--INCORRECT_TOKEN(20001, "无效token"),-->
    <!--INCORRECT_PASSWORD(20001, "密码错误"),-->
    <!--USER_NOT_EXISTS(20002, "用户不存在"),-->

    <!--;-->

    <!--private int code;-->

    <!--private String msg;-->

    <!--ResultEnum(int code, String msg) {-->
    <!--this.code = code;-->
    <!--this.msg = msg;-->
    <!--}-->

    <!--}-->
    <!--</code>-->
    <!--</pre>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
</div> <!-- /container -->
</body>
<script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
<script src="/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>
<script>
</script>
</html>